<template>
    <div>
        <van-nav-bar
                :fixed="fixed"
                title="兑换积分"
                left-text="返回"
                right-text="兑换记录"
                left-arrow
                @click-left="onClickLeft"
                @click-right="onClickRight"
        />
        <div class="scan">
            <ul>
                <li>余额<p>0</p></li>
                <li>积分<p>0</p></li>
            </ul>
        </div>
        <div class="title-name">
            <span>兑换积分</span>
        </div>
        <form @submit.prevent="setData">
            <van-cell-group>
                <van-field
                        v-model="username"
                        clearable
                        label="余额"
                        icon="question"
                        placeholder="请输入兑换余额"
                        @click-icon="$toast('question')"
                />
            </van-cell-group>
            <p :style="{fontSize:'14px',paddingLeft:'3px',color:'#ccc'}">提示：最少兑换数量100，请输入100的整数倍</p>
            <div style="padding: 10px;">
                <van-button size="large">确定</van-button>
            </div>
        </form>

    </div>
</template>

<script>
    import Vue from 'vue'
    import {NavBar} from 'vant';

    Vue.use(NavBar);
    export default {
        data() {
            return {
                fixed:true,
                username: ''
            }
        },
        methods: {
            onClickLeft() {
                this.$router.back()
            },
            onClickRight() {
                this.$router.push({
                    path:`/exchange`
                })
            },
            setData() {
                console.log(this.username)
            }
        }
    }
</script>

<style scoped>
    .title-name {
        padding: 10px 20px;
        font-size: 15px;
    }

    .scan li {
        height: 60px;
        margin-top: 8px;
        float: left;
        width: 49%;
        list-style: none;
    }

    .scan {
        margin-top: 50px;
        text-align: center;
        width: 100%;
        height: 80px;
        border-bottom: 1px solid #efefef;
        color: black;
    }
</style>
